<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D效果(四方盒子)</title>
    <style>
*{padding: 0;margin: 0;}    
#bos{
    width: 300px;
    height: 300px;
    margin: 350px auto;
    /* border: 5px dashed olive; */
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transform-origin: center center -150px;
}
.box{
    width: 300px;
    height:300px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.box1{
    background: url(./img/a1.jpg) no-repeat;
    background-size: 100%;
    opacity: 0.6;
}
.box2{
    background: url(./img/a2.jpg) no-repeat;
    background-size: 100%;
    transform-origin: bottom;
    transform: rotateX(90deg);
    top: -100%;
    opacity: 0.6;
}
.box3{
    background: url(./img/a3.jpg) no-repeat;
    background-size: 100%; 
    transform-origin: left;
    transform: rotateY(90deg);
    left: 100%;
    opacity: 0.6;
}
.box4{
    background: url(./img/a1.jpg) no-repeat;
    background-size: 100%;
    transform-origin: top;
    transform:rotateX(-90deg);
    top: 100%;
    opacity: 0.6;
}
.box5{
    background: url(./img/a2.jpg) no-repeat;
    background-size: 100%; 
    
    transform-origin: right;
    transform: rotateY(-90deg);
    left: -100%;
    opacity: 0.6;
}
.box6{
    background: url(./img/a3.jpg) no-repeat;
    background-size: 100%;
    transform: translateZ(-300px) rotateX(180deg);
    /* transform-origin:  */
    opacity: 0.6;
}
    
    </style>
</head>
<body>
<div id="bos">
    <div class="box  box1"></div>
    <div class="box  box2"></div>
    <div class="box  box3"></div>
    <div class="box  box4"></div>
    <div class="box  box5"></div>
    <div class="box  box6"></div>
</div>
<script>
var bos = document.getElementById('bos');
var num = 0;
setInterval(function(){
    num++;
    bos.style.transform = 'rotateX('+ num +'deg) rotateY('+ num +'deg)';
},10)





</script>


    
</body>
</html>